<script>
export default {
  name: "liveData"
}
</script>

<template>
  <div>
    <div class="topBox">
      <div class="item">
        <div class="title">展厅环境</div>
        <div class="cenData">
          <div class="dataItem">
            <img alt="" src="../../assets/image/1.png">
            <div>
              <div class="dataItemTitle">温度</div>
              <div class="dataItemValue">36.5℃</div>
            </div>
          </div>
          <div class="dataItem">
            <img alt="" src="../../assets/image/3.png">
            <div>
              <div class="dataItemTitle">湿度</div>
              <div class="dataItemValue">25RH</div>
            </div>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="title">机柜环境</div>
        <div class="cenData">
          <div class="dataItem">
            <img alt="" src="../../assets/image/1.png">
            <div>
              <div class="dataItemTitle">温度</div>
              <div class="dataItemValue">36.5℃</div>
            </div>
          </div>
          <div class="dataItem">
            <img alt="" src="../../assets/image/3.png">
            <div>
              <div class="dataItemTitle">湿度</div>
              <div class="dataItemValue">25RH</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="centerBox">
      <div class="item">
        <div class="title">机柜电流</div>
        <div class="dataItem">25A</div>
      </div>
      <div class="item">
        <div class="title">机柜电压</div>
        <div class="dataItem">220V</div>
      </div>
      <div class="item">
        <div class="title">机柜耗电</div>
        <div class="dataItem">20度</div>
      </div>
    </div>
    <div class="bottomBox">
      <div class="item">
        <div class="title">人员入侵</div>
        <div class="cenData">
          <div class="dataItem">
            <img alt="" src="../../assets/image/9.png">
            <div>无人</div>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="title">机柜门</div>
        <div class="cenData">
          <div class="dataItem">
            <img alt="" src="../../assets/image/7.png">
            <div>已打开</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.topBox {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .item {
    width: 49%;
    height: 150px;
    padding: 1rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, .2);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(20px);

    .title {
      margin-bottom: 15px;
    }

    .cenData {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .dataItem {
        display: flex;
        align-items: center;
        margin: 10px 0;

        img {
          width: 40px;
          height: 40px;
          margin-right: 10px;
        }

        .dataItemValue {
          font-size: 24px;
          font-weight: bold;
          margin-top: 8px;
        }
      }
    }
  }
}

.centerBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 12px 0;

  .item {
    width: 33%;
    height: 130px;
    padding: 1rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, .2);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(20px);

    .dataItem {
      height: 70%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      font-weight: bold;
    }
  }
}

.bottomBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0;

  .item {
    width: 49%;
    height: 150px;
    padding: 1rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, .2);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(20px);

    .title{
      margin-bottom: 15px;
    }

    .cenData{
      display: flex;
      justify-content: center;
      align-items: center;

      .dataItem{
        display: flex;
        align-items: center;
        margin: 10px 0;

        img{
          width: 60px;
          height: 60px;
          margin-right: 10px;
        }
        div{
          font-size: 24px;
          font-weight: bold;
        }
      }
    }
  }
}
</style>
